<template>
    <view class="pages">
        <mx-navbar title="搜索"></mx-navbar>

        <view class="fixt">
            <view class="cu-bar search bg-white">
                <view class="search-form round">
                    <text class="cuIcon-search"></text>
                    <input :adjust-position="false" v-model="key" type="text" placeholder="搜索关键字"
                        confirm-type="search"></input>
                </view>
                <view class="action">
                    <button class="cu-btn bg-main shadow-blur round"
                        @click="search(key)">搜索</button>
                </view>
            </view>
        </view>

        <!-- 历史搜索 -->
        <view class="m">
            <view class="module mbd" v-if="localwords && localwords.length > 0">
                <view class="mtitle flex justify-between align-center">
                    <view class="ml"><text class="cuIcon-titles"></text>搜索历史</view>
                    <view class="mr flex justify-between align-center" @click="clearHistory">
                        <text class="s">清空</text>
                        <text class="cuIcon cuIcon-delete"></text>
                    </view>
                </view>

                <view class="box flex flex-wrap align-center">
                    <view class="item" v-for="(item,index) in localwords" :key="index" @click="search(item)">
                        {{item}}
                    </view>
                </view>
            </view>
            <!-- 热门搜索 -->
            <view class="module " v-if="hotwords && hotwords.length>0">
                <view class="mtitle flex justify-between align-center">
                    <view class="ml"><text class="cuIcon-titles"></text>热门搜索</view>
                </view>

                <view class="box flex flex-wrap align-center">
                    <view class="item" :class="{'act': item.act ==1}" v-for="(item,index) in hotwords" :key="index" @click="$go(item.url)">
                        {{ item.name }}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const key = ref('')

onShow(()=> {
    getLocalWords()
    getHotwords()
})

const hotwords = ref([])
async function getHotwords() {
    let res = await proxy.$api('Hotwords', {}, false, false)
    if (res.code == 0) {
       hotwords.value = res.data || []
    }
}

const localwords = ref([])
function getLocalWords() {
    let list = uni.getStorageSync('localwords')
    if(list) {
        localwords.value = JSON.parse(list)
    }
}

function search(key) {
    let index = localwords.value.indexOf(key)
    if(index>-1) {
        localwords.value.splice(index,1)
    }
    if(key) {
        localwords.value.unshift(key)
        uni.setStorageSync('localwords', JSON.stringify(localwords.value))
    }
    proxy.$go(`/pages/list/list?key=${key}`)
}

function clearHistory() {
    localwords.value = []
    uni.setStorageSync('localwords', JSON.stringify([]))
}

onShareAppMessage(() => { })
onShareTimeline(() => { })

</script>

<style lang="scss" scoped>
.pages {
    min-height: 100vh;
    background-color: #FFFFFF;
}

.fixt {
    width: 100%;
    position: fixed;
}

.m {
    padding-top: 100rpx;
}

.mtitle {
   
    width: 100%;
    padding: 30rpx;
    font-size: 26rpx;
    .mr{
        font-size: 24rpx;
    }
    .cuIcon-titles{
        color: $main_color;
    }
}
.mbd{
    border-top: 10rpx solid $bg;
}

.box{
    padding: 0 30rpx;
    .item{
        display: inline-block;
        padding: 6rpx 24rpx;
        font-size: 22rpx;
        border-radius: 32rpx;
        color: #000;
        border: 1px solid #000;
        margin-right: 16rpx;
        margin-bottom: 16rpx;
    }
    .act{
        background-color: $main_color;
        border: 1px solid $main_color;
        color: #FFFFFF;
    }
}
</style>